import { defineComponent } from "vue"

export default defineComponent({
	name: "IconView",
	setup() {
		return () => (
			<div class="icon-view-container">
				<h1 class="row-title">普通引入</h1>
				<div class="row">
					<chen-icon icon="user-secret"></chen-icon>
					<chen-icon icon="bars"></chen-icon>
					<chen-icon icon="shield-halved"></chen-icon>
					<chen-icon icon="file"></chen-icon>
					<chen-icon icon="filter"></chen-icon>
					<chen-icon icon="gear"></chen-icon>
					<chen-icon icon="barcode"></chen-icon>
					<chen-icon icon="folder-open"></chen-icon>
				</div>
				<h1 class="row-title">设置不同大小</h1>
				<div class="row">
					<chen-icon icon="star" size="2xs"></chen-icon>
					<chen-icon icon="star" size="xs"></chen-icon>
					<chen-icon icon="star" size="sm"></chen-icon>
					<chen-icon icon="star" size="lg"></chen-icon>
					<chen-icon icon="star" size="2xl"></chen-icon>
				</div>
				<h1 class="row-title">旋转与翻转</h1>
				<div class="row">
					<chen-icon icon="mountain-sun" rotation="90"></chen-icon>
					<chen-icon icon="mountain-sun" rotation="180"></chen-icon>
					<chen-icon icon="mountain-sun" rotation="270"></chen-icon>
					<chen-icon icon="mountain-sun" flip="horizontal"></chen-icon>
					<chen-icon icon="mountain-sun" flip="vertical"></chen-icon>
					<chen-icon icon="mountain-sun" flip="both"></chen-icon>
				</div>
				<h1 class="row-title">动画效果</h1>
				<div class="row">
					<chen-icon icon="gears" size="lg" beat></chen-icon>
					<chen-icon icon="gears" size="lg" beat-fade></chen-icon>
					<chen-icon icon="gears" size="lg" bounce></chen-icon>
					<chen-icon icon="gears" size="lg" spin></chen-icon>
					<chen-icon icon="gears" size="lg" fade></chen-icon>
					<chen-icon icon="gears" size="lg" shake></chen-icon>
					<chen-icon icon="gears" size="lg" flip></chen-icon>
				</div>
				<h1 class="row-title">添加自定义props-type属性</h1>
				<div class="row">
					<chen-icon icon="user-secret" size="xl" type="primary"></chen-icon>
					<chen-icon icon="bars" size="xl" type="success"></chen-icon>
					<chen-icon icon="shield-halved" size="xl" type="info"></chen-icon>
					<chen-icon icon="file" size="xl" type="warning"></chen-icon>
					<chen-icon icon="filter" size="xl" type="danger"></chen-icon>
					<chen-icon icon="gear" size="xl" color="red"></chen-icon>
					<chen-icon icon="barcode" size="xl" color="#1faf64"></chen-icon>
					<chen-icon icon="folder-open" size="xl" color="#fac"></chen-icon>
				</div>
			</div>
		)
	},
})
